const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssPlugin = require('mini-css-extract-plugin')

// const entrys = ['index', 'search', 'notes']
const entrys = ['index', ]
const je = {}
const hp = []
entrys.forEach(a => {
    je[a] = {
        import: './src/js/entry/' + a + '.js',
        filename: 'js/[name].js'
    }
    hp.push(new HtmlWebpackPlugin({
        filename: a + '.html',
        template: `html-loader!webpack-html-include-loader!./src/${a}.html`,
        chunks: [a]
    }))
})

/**@type {webpack.Configuration} */
module.exports = {
    entry: je,
    mode: 'development',
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist'),
        // clean: true,
    },
    devtool: 'inline-source-map',
    watch: true,
    cache: false,
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [CssPlugin.loader, 'css-loader'],
            },
            {
                test: /\.scss$/i,
                use: [CssPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'image/[hash][ext]'
                }
            },
            {
                test: /\.ttf$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash][ext]'
                }
            }
        ],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 8080,
    },
    plugins: [
        ...hp,
        new CssPlugin({
            filename: 'css/[hash].css'
        })
    ]
};